import React from 'react';
import '../App.scss';
import 'antd/dist/antd.css'
import { Input, Button, Select } from 'antd';

const { Search } = Input;
const { Option} = Select;

class App extends React.Component {

  state = {
    value: '',
    list: []
  }

  handleChane = (event) => {

    let value = event.target.value
    this.setState({
      value
    });
  }

  handleAdd = () => {
    let list = this.state.list
    list.push(this.state.value)

    this.setState({
      list
    });
  }

  handleSearch = (res) => {
    let list = this.state.list
    list.push(res)

    this.setState({
      list
    });
  }

  render() {

    let options = []

    return <div>
      <p>欢迎来到建众商学院</p>
      <h1>Hello world!!!</h1>
      <Input type='text' style={{ width: 300 }} value={this.state.value} onChange={this.handleChane}></Input>
      <Button type="primary" onClick={this.handleAdd}>添加</Button>
      <ul style={{ width: 300 }}>
        {this.state.list.map((item, index) => {
          options.push(<Option key={index} value={item}>{item}</Option>)
          return <li key={index}>{item}</li>
        })}
      </ul>
      <div>
      <Search
      style={{width: 500}}
          placeholder="input search text"
          enterButton="搜索"
          onSearch={this.handleSearch}></Search>
      </div>
      <Select style={{width: 120}}>
        { options }
      </Select>
    </div>
  }

}

export default App;
